<template>
  <div class="app-main">
    <!-- 使用 keep-alive 缓存组件 -->
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>

    <!-- 内嵌用户列表区域 -->
    <div v-if="showUserList" class="embedded-view">
      <UserList @closeUserList="handleCloseUserList"/>
    </div>
    <div v-if="showLogAdrList" class="embedded-view">
      <LogAdrList @closeLogAdrList="handlecloseLogAdrList"/>
    </div>
    <div v-if="showHistorySql" class="embedded-view">
      <HistorySql @closeHistorySql="handleCloseHistorySql"/>
    </div>
    <div v-if="showGeneratedHistorySql" class="embedded-view">
      <GeneratedHistorySql @closeGeneratedHistorySql="handleCloseGeneratedHistorySql"/>
    </div>
    <div v-if="showCodeGenerator" class="embedded-view">
      <CodeGenerator @closeCodeGenerator="handleCloseCodeGenerator"/>
    </div>

  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import UserList from '@/views/UserList.vue'
import LogAdrList from '@/views/binlog/LogAdrList.vue'
import HistorySql from '@/views/binlog/HistorySql.vue'
import GeneratedHistorySql from '@/views/binlog/GeneratedHistorySql.vue'
import CodeGenerator from '@/views/binlog/CodeGenerator.vue'
const emit = defineEmits(['closeUserList', 'closeLogAdrList', 'closeHistorySql', 'closeGeneratedHistorySql', 'closeCodeGenerator'])
const handleCloseUserList = () => {
  emit('closeUserList')  // 向上传递事件
}

const handlecloseLogAdrList = () => {
  emit('closeLogAdrList')  // 向上传递事件
}

const props = defineProps({
  showUserList: {
    type: Boolean,
    required: true
  },
  closeUserList: {
    type: Boolean,
    required: false
  },
  showLogAdrList: {
    type: Boolean,
    required: true
  },
  closeLogAdrList: {
    type: Boolean,
    required: false
  },
  showHistorySql: {
    type: Boolean,
    required: true
  },
  showGeneratedHistorySql: {
    type: Boolean,
    required: true
  },
  showCodeGenerator: {
    type: Boolean,
    required: true
  }
})

const handleCloseHistorySql = () => {
  emit('closeHistorySql')  // 向上传递事件
}

const handleCloseGeneratedHistorySql = () => {
  emit('closeGeneratedHistorySql')  // 向上传递事件
}

const handleCloseCodeGenerator = () => {
  emit('closeCodeGenerator')  // 向上传递事件
}
</script>

<style scoped>
.app-main {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  position: relative;
}

.embedded-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 10;
  padding: 20px;
  overflow: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>